<template>
    <table :class="cns">
        <!-- 表头 -->
        <tr class="ph-tr">
            <template v-for="(th,index) in ths" :key="index">
                <th-check v-if="th.check=='check'" :checked="checkedAll" @check="onToggleCheckall"/>
                <ph-th v-else-if="th.check=='radio'" />
                <th-sort v-else-if="th.sort" :dataType="th.dataType" :name="th.key" :sortName="sortName" :sortMode="sortMode">{{th.name}}</th-sort>
                <ph-th v-else-if="th.rowAction">操作</ph-th>
                <ph-th v-else-if="th.name" :width="th.width">{{th.name}}</ph-th>
                <ph-th v-else />
            </template>
        </tr>
        <!-- 表正文 -->
        <tr :class="trcns(row.id)" v-for="(row,idx) in list" :key="idx" @click="onTrClick(row.id,row)">
            <template v-for="(th,index) in ths" :key="index">
                <td-check v-if="th.check" :checkMode="th.check" :id="row.id" :checked="checkedRecord.includes(row.id)"/>
                <td-action v-else-if="th.rowAction" :action="th.rowAction" :row="row"/>
                <ph-td 
                :row="row"
                :data-title="row[th.key]" 
                :align="th.align" 
                :clickable="th.clickable" 
                :width="th.width" 
                :name="th.key"
                :type="th.type"
                :href="th.href"
                :target="th.target"
                v-else>{{formater(row,th.key,th.format)}}</ph-td>
            </template>
        </tr>
        <!-- 合计 -->
        <tr class="ph-tr ph-tr-sum" v-if="sum">
            <template v-for="(th,index) in ths" :key="index">
                <ph-td class="ph-td-sum" :width="th.width" align="center">
                    <span v-if="th.sum">{{sums[th.key]||0}}</span>
                    <span v-else-if="th.key==='id'">合计</span>
                </ph-td>
            </template>
        </tr>
    </table>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType } from 'vue'
import {ITh} from './struct'
import PhTd from './td.vue'
import PhTh from './th.vue'
import {format} from '../../shared/util'
import ThCheck from './th-check.vue'
import ThSort from './th-sort.vue'
import TdCheck from './td-check.vue'
import TdAction from './td-action.vue'
export default defineComponent({
    //异步加载组装页面会抖动
    components:{
        ThCheck,//:defineAsyncComponent(()=>import('./th-check.vue')),
        ThSort,//:defineAsyncComponent(()=>import('./th-sort.vue')),
        TdCheck,//:defineAsyncComponent(()=>import('./td-check.vue')),
        TdAction,//:defineAsyncComponent(()=>import('./td-action.vue')),
        PhTh,
        PhTd
    },
    props:{
        ths:{
            type: Array as PropType<Array<ITh>>,
            default:()=>[]
        },
        list:{
            type: Array as PropType<Array<Record<string,unknown>>>,
            default:()=>[]
        },
        lock:{
            type:String //left right
        },
        checkedRecord:{
            type: Array as PropType<Array<string|number>>,
            default:()=>[]
        },
        sortName:{
            type:String
        },
        sortMode:{
            type:Number
        },
        sum:{
            type:Boolean
        }
    },
    setup(props){
        const onTrClick = inject<(id:string|number,row:Record<string,unknown>)=>void>("trClick")
        const cns = computed(()=>{
            return {
                'ph-table':true, 
                'ph-table-lock':props.lock, 
                'ph-table-lock-left':props.lock==='left',
                'ph-table-lock-right':props.lock==='right'
            }
        })
        const trcns = (id:string|number)=>{
            return {
                'ph-tr':true,
                'ph-tr-active':props.checkedRecord.includes(id)
            }
        }
        const onToggleCheckall = (v:boolean)=>{
            console.log(v)
        }
        const checkedAll = computed(()=>{
            return !!(props.list.length&&props.list.length==props.checkedRecord.length)
        })
        const sums = computed(()=>{
            const sums = {} as {[k:string]:number}
            props.ths.forEach(th=>{
                if(th.sum&&props.list.length){
                    sums[th.key] = (props.list as Record<string,number>[]).reduce((a,b)=>{
                        const av = Number(a[th.key])||0
                        const bv = Number(b[th.key])||0
                        return {
                            [th.key]:av+bv
                        } as Record<string,number>
                    })[th.key]
                }
            })
            return sums
        })
        const formater = (row:Record<string,unknown>,key:string,fmt:string)=>{
            return fmt?format(row,fmt):row[key]
        }
        return {
            cns,
            trcns,
            sums,
            formater,
            checkedAll,
            onToggleCheckall,
            onTrClick
            }
    }
})
</script>
<style lang="scss">
.ph-table {
    table-layout: fixed;
    border-collapse: collapse;
    &-lock{
        flex: 0 0 auto;
        position: relative;
        z-index: 1;
        &-left{
            box-shadow: 1px 0 8px rgb(0 0 0 / 8%);
        }
        &-right{
            box-shadow: -1px 0 8px rgb(0 0 0 / 8%);
            margin-left: -1px;
        }
    }
    
    .ph-tr{
        &-sum .ph-td{
            font-weight: bold;
        }
        &-sum .ph-td,
        &-active .ph-td,
        &:not(.ph-tr-sum):hover .ph-td{
            background-color:var(--ph-light-l1);
        }
        .ph-th,
        .ph-td{
            margin-left: -1px;
            margin-top: -1px;
            &:first-child{
                margin-left: 0;
            }
        }
        &:first-child{
            .ph-th,
            .ph-td{
                margin-top: 0;
            }
        }
    }
}
</style>